// 负责去 享用 复用的数据 或者逻辑
const Btn = (props) => <button>子组件 {props.data}</button>;
const Btn1 = (props) => <button>子组件 {props.data}</button>;

// 负责提供 需要复用的逻辑 数据
function DataProvider(props) {
  console.log(props);
  return (
    <div>
      <div>============= DataProvider =================</div>
      {/* <Btn></Btn>
      {Btn()}
      {<button>子组件</button>} */}

      {/* 函数的调用  */}
      {props.render(100)}
      <div>============= DataProvider =================</div>
    </div>
  );
}

export default function App() {
  return (
    <>
      {/* render 函数的声明  */}
      <DataProvider render={(data) => <Btn data={data} />}></DataProvider>
    </>
  );
}

// // 调用
// fn(123)

// // 声明
// function fn(params) {
//   console.log(params);
// }
